<template>
  <div class="deepread">
    <v-header>
      <div slot="collect" @click="toggleCollect">
        <img :src="isFavorite? Favorited : Favorite" alt="">
      </div>
      <div slot="note" @click="shownote = true">添加笔记</div>
<!--      <div slot="up" @click="submit" v-show="!showAnswer">提交</div>-->
      <div slot="up" @click="showanswer = true">查看答案</div>
    </v-header>

    <div>


      <!-- 这里的索引看以后是否需要,不需要就删 -->
      <!-- <li v-for="(bq,bindex) in this.list">
                          <a href="javascript:void(0);"
                             @click="bqin(bq.id,bindex)">
                              <span v-text="bq.name"></span>
                          </a>
                      </li>-->
      <!--              </v-selected>-->
      <button class="con-tit" @click="bqins()">上一题</button>
      <button class="con-tit" @click="bqinx()">下一题</button>
      <p class="con-tit">{{index}}.(阅读理解)</p>
      <p>描述:<span v-html="questionStem">{{questionStem}}</span></p>
      <p><span v-html="classifyName">{{classifyName}}</span></p>
      <p class="con-main" v-html="article"></p>
      <div></div>
      <li v-for="(bq,bindex) in this.lists">
        <span v-html="bq.context"></span>
        <div v-if="classifyName=='单项选择题' ||
																				classifyName=='判断题' ||
																				classifyName=='顺序选择题'">
          <b v-for="(sq,bindex) in bq.ops">
            <label>
              <input type="radio"></input>
              <span v-html="sq.value"></span>
            </label>

          </b>
        </div>
      </li>



    </div>

    <div class="bar" v-show="show">
      <span>{{num}}/{{total}}</span>
      <img src="@/assets/line.png" alt="">
    </div>

    <div class="deep-main" v-show="show">
      <van-swipe :loop="false" :show-indicators="false" @change="onChange">
        <van-swipe-item v-for="(item,index) in question" :key="index" >
          <p class="item-tit">{{index+1}}. {{item.title}}</p>
          <div class="box-item" v-for="(opt,ind) in item.answer" :key="ind">
            <!-- 判断做题  还是 做题记录 -->
            <div class="item-left" v-if="!showAnswer" :class="{active:container[index] === ind}" @click="IsActive(opt.option,ind,index)">
              {{options[ind]}}
            </div>
            <div class="item-left disabeld" v-else :class="ind == deepAnswer[index] ? 'active': '' ">
              {{options[ind]}}
            </div>

            <div class="item-right">{{opt.option}}</div>
          </div>
          <p class="answer" v-show="showAnswer">答案: {{item.best}}</p>
          <div class="analyse" v-show="showAnswer">
            <div>答案解析:</div>
            <div class="detail">{{index+1}}. {{item.detail}}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 添加笔记 -->
    <van-dialog v-model="shownote" title="复习笔记" show-cancel-button confirm-button-text="保存" :beforeClose="noteBtn">
      <textarea v-model="message" placeholder="要记点什么吗"></textarea>
    </van-dialog>
    <!-- 查看答案 -->
    <van-dialog v-model="showanswer" title="查看答案" >
      <!--      <textarea v-model="message"></textarea>-->
      <div class="form-group" v-for="(o,oindex) in this.trueOps">
        <label class="col-lg-1 col-md-1 col-sm-1 col-xs-12">
          <span v-text="oindex+1"></span>
        </label>
        <label v-if="o.mediaType==0"><span v-html="o.value"></span></label>
        <label v-if="o.mediaType==1" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" >
          <audio-tag :id="o.id" :url="o.pathUrl" :type="'b'"></audio-tag>
        </label>
        <label v-if="o.mediaType==2" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" ><span v-html="o.value"></span></label>
        <label v-if="o.mediaType==3" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" >
          <img alt="大题图片"
               :src="o.pathUrl" title="查看图片" width="250"
               height="250"/>
        </label>
      </div>
    </van-dialog>

  </div>
</template>

<script>
import header from '@/components/content/header'
import api from '@/api/api'
import { Swipe, SwipeItem, Toast, Dialog } from 'vant'
import { mapGetters } from 'vuex'

export default {
  name: 'Vocabularying',
  components: {
    "v-header":header,
    [Toast.name]: Toast,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.Component.name]: Dialog.Component,
  },
  data () {
    return {
      isFavorite:false,  // 是否已收藏
      Favorite:require('@/assets/collect.png'),
      Favorited:require('@/assets/collected.png'),
      show:false,
      list:[],  // 深度阅读的 data
      lists:[],//查询小题
      name:'',
      questionStem:'',//描述
      classifyName:'',
      roleid: '',//用户登录的角色id
      id: '',//题目对应的id
      article:'',  // 文章内容
      index:'',  // data 的索引
      indexs:0,  // data 的索引
      question:[],  // 小题的数组
      total:'',  // 小题总数
      answer:[],  // 题目的选项
      num:'1',  // 第几小题  1/4
      options:['A','B','C','D','E','F','G','H','I','J','K','L'],  // 选项前的标签
      container:[], // 放每个小题选中的索引
      solution:[],  // 提交答案的数组 内容
      deep:{},  // 提交答案的对象 索引
      prevRoute:'',
      message:'',
      shownote:false,
      showanswer:false,
      trueOps : []
    }
  },
  created () {
    this.getDeep()


  },
  computed: {
    ...mapGetters(['showAnswer', 'deepAnswer']),
  },
  beforeRouteEnter(to, from, next) {
    // console.log(from)
    next(vm => {
      vm.geturl(from.name)
    })
  },
  methods: {
    //查询题目
    getDeep(){
      Toast.loading({message: '加载中...', forbidClick: true});
      this.teacherid = this.$route.query.teacherid
      this.type = this.$route.query.type
      this.roleid=this.$route.query.roleid
      console.log(this.teacherid)
      console.log(this.type)
      console.log(this.roleid)
      api.Entrances(this.teacherid,this.type,'%2525%2525').then(res=>{
        console.log(res)
        this.list = res.result // 深度阅读的 data
        this.article=this.list[0].context
        this.classifyName=this.list[0].classifyName
        this.id=this.list[0].id
        console.log(this.list)
        console.log(this.article)
        console.log('sqs:',this.list.sqs)
        //根据进入训练查询出来的第一个题目id,查出第一个题目的所有内容，包括小题和选项
        api.Questions(this.id,this.roleid).then(res=>{
          console.log('a:',res)
          console.log('b:',this.id)
          console.log('ba:',res.result.sqs)
          this.lists=res.result.sqs

          this.questionStem=res.result.questionStem
        }).catch(error=>{
          console.log(error)
        })
      }).catch(error=>{
        console.log(error)
      })

    },

    /* //点击题目名称显示题目的小题和选项
      bqin(id, index){
          console.log(this.list)
          console.log(index)
          this.article=this.list[index].context
           api.Questions(id,this.roleid).then(res=>{
                console.log(res)

                }).catch(error=>{
                  console.log(error)
                })

         },*/
    //点击题目名称显示题目的小题和选项
    bqinx(){
      console.log(this.list)
      if (this.indexs<this.list.length) {
        this.indexs++
        console.log(this.list[this.indexs].id)
        console.log(this.index)
        this.article = this.list[this.indexs].context
        console.log(this.article)
        this.classifyName=this.list[this.indexs].classifyName
        api.Questions(this.list[this.indexs].id, this.roleid).then(res => {
          console.log(res)
          this.classifyName=res.result.classifyName
          this.lists=res.result.sqs

        }).catch(error => {
          console.log(error)
        })
        api.Chakan(this.list[this.indexs].id).then(res=>{
          console.log('b:',this.id)
          this.trueOps=res.result
          console.log(res)
        }).catch(error=>{
          console.log(error)
        })
      }
    },
    //点击题目名称显示题目的小题和选项
    bqins(){
      console.log(this.list)
      console.log(this.indexs)
      if (this.indexs>0) {
        this.indexs--
        console.log(this.list[this.indexs].id)
        console.log(this.index)
        this.article = this.list[this.indexs].context
        this.classifyName=this.list[this.indexs].classifyName
        api.Questions(this.list[this.indexs].id, this.roleid).then(res => {
          console.log(res)

          this.lists=res.result.sqs

        }).catch(error => {
          console.log(error)
        })
        api.Chakan(this.list[this.indexs].id).then(res=>{
          console.log('b:',this.id)
          this.trueOps=res.result
          console.log(res)
        }).catch(error=>{
          console.log(error)
        })
      }
    },


    // 头部 1/4 1的索引
    onChange(index){
      this.num = index + 1
    },

    // 小题的选中
    IsActive(detail,ind,index){
      this.$set(this.container,index,ind)  // set顺序必须和上面class:active一样  修改container，使得视图可以及时刷新。
      console.log('第'+`${index+1}`+'道题,选项是'+detail)
      // console.log(this.container)
    },

    // 收藏    没写返回数据给后台
    toggleCollect(){
      if( this.isFavorite ){
        this.isFavorite = false
        Toast('取消收藏')
      }else{
        this.isFavorite = true
        Toast('收藏成功')
      }
    },

    // 添加笔记
    noteBtn(action,done){
      if(action === 'cancel'){
        this.shownote = false
        done()
      }else if (action === 'confirm'){
        if(!this.message){
          Toast("请输入笔记,再保存")
          done(false)
        }else{
          console.log('深度阅读笔记:',this.message)
          this.shownote = false
          this.message = ''
          done()
        }
      }
    },

    // 提交
    submit(){
      Dialog.confirm({message: '是否提交试题?',}).then(() => {
        Toast.success('提交成功')
        this.question.forEach((item,index)=>{
          let a = this.container[index]
          if( a === undefined ){
            this.solution.push( null )
            this.deep[index] = null
          }else{
            this.solution.push( item.answer[a].option )
            this.deep[index] = a
          }
        })
        setTimeout(() => {
          console.log('深度阅读',this.solution)
          this.$store.dispatch("deepAnswer", this.deep)
          this.$router.push({path:'/reportread'})
        }, 2000);
      })
        .catch(() => {
          // 取消
        });
    },

    geturl(url){
      this.prevRoute=url;
      // console.log(this.prevRoute)
      if(url == "readtype"){
        this.$store.dispatch("showAnswer", false)
      }
    }

  },
}
</script>

<style lang="less" scoped>
.deepread{
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background-color: #f1f1f1;
}
.deep-con{
  margin: 5px 0;
  background: #fff;
  padding: 10px;
  height: 230px;
  overflow-y: auto;
  .con-tit{font-size: 16px;color: #333;line-height: 20px;}
  .con-main{font-size: 16px; color: #333; line-height: 24px;text-align: justify;margin-top: 5px;text-indent: 2em;}
}
.bqform-control {
  font-weight: bold;
  height: 32px;
  padding: 5px 8px;
  margin: 5px;
  color: #222;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}
.bar{
  height: 36px;
  background: #fff;
  text-align: center;
  position: relative;
  margin-bottom: 5px;
  span{
    font-size: 14px;
    color: #656565;
    line-height: 36px;
    position: absolute;
    left: 10px;
    top: 0;
  }
  img{display: inline-block;width: 36px;line-height: 36px;}
}
.deep-main{
  padding: 5px 10px;
  background: #fff;
  height: calc(100% - 345px);
  box-sizing: border-box;
  overflow-y: auto;
}
.item-tit{font-size: 16px;color: #333;line-height: 24px;text-align: justify;margin-bottom: 10px;}
.box-item{
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .item-left{
    width: 32px;
    height: 32px;
    border: 1px solid #FF6400;
    border-radius: 16px;
    box-sizing: border-box;
    background: #fff;
    color: #FF6400;
    font-size: 16px;
    text-align: center;
    line-height: 30px;
  }
  .active{background: #ff6400;color: #fff;}
  .item-right{
    width: calc(100% - 40px);
    text-align: justify;
    font-size: 16px;
    color: #333;
    line-height: 22px;
  }
}
.answer{font-size: 16px;color: #333;}
.analyse{
  font-size: 16px;
  color: #333;
  margin-top: 10px;
  .detail{
    text-align: justify;
    line-height: 24px;
    margin: 10px 0 30px;
  }
}
.disabeld{pointer-events: none;}
textarea{
  font-size: 14px;
  width: 100%;
  white-space: pre-wrap;
  display: block;
  width: 100%;
  height: 100%;
  text-align: justify;
  box-sizing: border-box;
  border: 0;
  resize: none;
  line-height: 24px;
  padding: 10px 10px 10px 20px;
  color: #323232;
  height: 150px;
}
</style>
